<template>
  <div class="box">
    <ul class="contable">
      <li>
        <span><van-checkbox v-model="allCheck" @click="allCheckChenge" shape="square" icon-size=".5rem"></van-checkbox></span>
        <span style="justify-content: center;">名字</span>
        <span>状态</span>
        <span style="justify-content: left;">发布端口</span>
      </li>
      <li v-for="(item, index) in pageData" :key="item.Id">
        <span><van-checkbox v-model="checks[index]" shape="square" icon-size=".5rem"></van-checkbox></span>
        <router-link tag="span" :to="'/Container/ConContent/' + item.Id" class="color">{{ item.Names[0] }}</router-link>
        <span>
          <van-button @click="clickState(item)" size="mini" class="button" :type="item.State | containerStateStyle">{{ item.State | containerState }}</van-button>
        </span>
        <span>
          <a @click="toLink(data)" class="color" v-for="(data, index) in Portshtml(item)" :key="index">{{data}} </a>
        </span>
      </li>
    </ul>
    <van-pagination
      v-model="currentPage"
      :total-items="conList.length"
      :show-page-size="pageNum"
      force-ellipses
      class="page"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { Checkbox, Button, Pagination } from 'vant'

Vue.use(Checkbox)
Vue.use(Button)
Vue.use(Pagination)
export default {
  data () {
    return {
      currentPage: 1, // 当前页
      pageNum: 10,
      pageData: [], // 当前页的数据
      allCheck: false, // 全选
      checks: [], // 当前页面的子项数据是否选中
      checkItem: [] // 当前页面选中的数据
    }
  },
  props: ['conList'],
  watch: {
    conList: function () {
      this.currentPageData()
      this.currentChecks()
    },
    // checks改变时，算当前选中的数据，并传给父组件
    checks: function () {
      this.checkItem = []
      this.checks.map((item, index) => {
        if (item) {
          this.checkItem.push(this.pageData[index])
        }
      })
      this.$emit('checkItem', this.checkItem)
      if (this.checks.indexOf(false) === -1) {
        this.allCheck = true
      } else {
        this.allCheck = false
      }
    },
    // 监听分页数据
    currentPage: function () {
      this.currentPageData()
      this.currentChecks()
    }
  },
  mounted () {
    this.currentPageData()
    this.currentChecks()
  },
  methods: {
    // 点击状态按钮切换状态
    clickState (item) {
      if (item.State === 'running') {
        if (!confirm('确认暂停容器？')) {
          return
        }
        const data = {
          docker: `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${item.Id}/stop"`,
          operation: '停止'
        }
        this.fetchData(data)
      } else if (item.State === 'exited') {
        const data = {
          docker: `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/containers/${item.Id}/start"`,
          operation: '启动'
        }
        this.fetchData(data)
      }
    },
    // 请求数据模板
    fetchData (item) {
      const parse = {
        data: {
          docker: item.docker
        }
      }
      this.$post(parse, res => {
        var data = JSON.parse(res)
        if (data.message) {
          return this.$Notify({ type: 'danger', message: data.message })
        }
        if (data >= 200 && data < 300) {
          this.$Notify({ type: 'success', message: item.operation + '容器成功！' })
          this.$emit('success')
        } else {
          this.$Notify({ type: 'danger', message: item.operation + '容器失败！' })
        }
      })
    },
    // 全选框改变
    allCheckChenge () {
      this.checks = []
      if (this.allCheck) {
        this.pageData.map(item => {
          this.checks.push(true)
        })
      } else {
        this.pageData.map(item => {
          this.checks.push(false)
        })
      }
    },
    // 计算checks
    currentChecks () {
      this.checks = []
      this.pageData.map(item => {
        this.checks.push(false)
      })
    },
    // 算当前页面数据
    currentPageData () {
      this.pageData = this.conList.slice(((this.currentPage - 1) * this.pageNum), this.currentPage * this.pageNum)
    },
    // 处理端口
    Portshtml (item) {
      const value = item.Ports
      if (value.length === 0) {
        return '...'
      } else {
        return value.map(item => {
          if (item.PublicPort) {
            return `${item.PublicPort}:${item.PrivatePort},`
          } else {
            return item.PrivatePort + ','
          }
        })
      }
    },
    // 跳转端口
    toLink (port) {
      if (port !== '.' && port.indexOf(':') !== -1) {
        var ip = ''
        if (localStorage.getItem('baseURL')) {
          ip = localStorage.getItem('baseURL').split(':')[1].replace('//', '')
        }
        window.open('http://' + (localStorage.getItem('baseURL') ? ip : location.hostname) + ':' + port.split(':')[0])
      }
    }
  },
  filters: {
    // 显示状态信息
    containerState: (value) => {
      if (value === 'running') {
        return '运行'
      } else if (value === 'paused') {
        return '暂停'
      } else {
        return '停止'
      }
    },
    // 显示状态的颜色
    containerStateStyle: (value) => {
      if (value === 'running') {
        return 'primary'
      } else if (value === 'paused') {
        return 'warning'
      } else {
        return 'danger'
      }
    }
  }
}
</script>

<style lang="scss" scope>
.contable{
  font-size: vw(28);
  border: 1px solid #f2f2f2;
  border-radius: vw(5);
  margin-bottom: vw(60);
  li{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    line-height: vw(83);
    .button{
      // width: vw(100);
      // height: vw(45);
      line-height: vw(30);
      padding: vw(5) vw(5);
    }
    span{
      flex: 1;
      display: flex;
      justify-content: center;
      overflow: hidden; //超出部分隐藏
      text-overflow: ellipsis; //超出部分显示...
      white-space: nowrap; //文本强制一行显示
      &:nth-child(1){
        flex: .5;
        height: vw(30);
      }
      &:nth-child(2){
        justify-content:flex-start;
      }
      &:nth-child(4){
        flex: 1.5;
        justify-content:flex-start;
      }
    }
  }
}
.page{
  width: 92%;
  padding: vw(10);
  background: #fff;
  position: fixed;
  bottom: vw(138);
  font-size: vw(26) !important;
  margin-top: vw(15);
}
</style>
